<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<c-nav-bar :title="titleHeader"></c-nav-bar>
		<view class="mainContainer">
			<view @click="goToDetail(item.id)" v-for="(item, index) in recommendJourneies" :key="index"
				class="mainContainer_item">

				<view class="ticketList">
					<!-- <view class="ticketList_tag">
						<u-tag :text="i.tagsName" v-for="(i,idx) in item.tagsList" :key="idx" type="success" plain
							size="mini" :borderColor='i.tagsColor' :color='i.tagsColor'></u-tag>
					</view> -->
					<!-- <view class="title">{{item.intro}}</view> -->
					<block v-if="item.coverImageList&&item.coverImageList.length>1">
						<u-swiper :list="item.coverImageList" @change=" e =>{
							changeImage(e,index)
						}" :autoplay="false" indicatorStyle="right: 20px" height='320rpx' style="swiper">
							<view slot="indicator" class="indicator-num">
								<text class="indicator-num__text">{{ item.coverImageList.length }}图</text>
							</view>
						</u-swiper>
					</block>
					<block v-else-if="item.coverImageList&&item.coverImageList.length==1">
						<image :src="item.coverImageList[0]" mode="" style="width: 100%;height: 320rpx;border-radius: 25rpx;"></image>
					</block>
					<view class="mainContainer_title">
						<span style="width: 100%;margin: 10rpx 10rpx;">
							{{item.name}}
						</span>
						<view class="detail">
							<text>行程历时{{item.planDayNum}}天</text>
							<text>{{item.planPlaceNum}}个景区</text>
						</view>
					</view>
					<!-- <swiper class="swiper"  :autoplay="true" :interval="3000" :duration="1000"
						style="height: 980rpx;">
						<swiper-item class="swiper-items" v-for="i,index in item.coverImageList ">
							<image style="width: 100%; height: 100%;" :src="i" mode="aspectFit">
							</image>
						</swiper-item>
					</swiper> -->
				</view>
			</view>
			<view @click="goToTempDetail(index)" v-for="(item, index) in tempList" :key="index" class="mainContainer_item">
				<view class="ticketList">
					<image :src="item.cover" mode="" style="width: 100%;height: 320rpx;border-radius: 25rpx;"></image>
					<view class="mainContainer_title">
						<span style="width: 100%;margin: 10rpx 10rpx;">
							{{item.name}}
						</span>
						<view class="detail">
							<text>研学时长：{{item.planDayNum}}天&nbsp;&nbsp;|</text>
							<text>&nbsp;招募年龄：{{item.age}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view v-else style="margin: auto;align-items: center;
    margin-top: 62px;
    font-size: 16px;
    text-align: center;
    color: #717171;
}">
			暂无推荐行程
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleHeader: '官方推荐',
				item: null,
				limit: 9999,
				page: 1,
				recommendJourneies: [],
				currentNum: [],
				tempList:[
					{
						name:'东海五渔村海岛非遗研学游',
						cover:'https://i.ringzle.com/file/20240507/eb23979540d24496b271c40840b63431.png',
						planDayNum:4,
						age:'小学&初中'
					},
					{
						name:'到灯塔去，海岛影像研学游 - 花鸟岛',
						cover:'https://i.ringzle.com/file/20240507/e2166120320f4c5d85b60746fab95101.png',
						planDayNum:4,
						age:'初中&高中'
					},
					{
						name:'百年渔场历史变迁研学游 - 枸杞岛+嵊山岛',
						cover:'https://i.ringzle.com/file/20240507/f21068fb0fbc4accaf26aed7a85a987d.png',
						planDayNum:4,
						age:'初中&高中'
					},
					{
						name:'舟游列岛公益营销研学游-泗礁岛+枸杞岛+嵊山岛',
						cover:'https://i.ringzle.com/file/20240507/fb6f58e9ba08470684702bfdc9cc9097.png',
						planDayNum:5,
						age:'初中&高中'
					},
					{
						name:'五渔红色文化传承研学游 - 泗礁岛',
						cover:'https://i.ringzle.com/file/20240507/ddebcb246b824cf681cb5e2575d8fb3a.png',
						planDayNum:2,
						age:'小学&初中'
					},
					{
						name:'美丽海岛环保运动研学游 - 泗礁岛',
						cover:'https://i.ringzle.com/file/20240507/4327a17dc4f04986b5ca664c5ab93fe2.png',
						planDayNum:4,
						age:'小学&高中'
					},
					{
						name:'洋山深水港国情教育研学游 - 洋山岛',
						cover:'https://i.ringzle.com/file/20240507/efe8a22b4abb42108bc6f370c0525dbb.png',
						planDayNum:1,
						age:'小学&高中'
					}
				]
			}
		},
		onLoad(option) {
			// if (option.item) {
			// 	this.item = JSON.parse(option.item);
			// 	this.getList()
			// }
			this.getList()

		},
		methods: {
			getList() {
				this.$api.get('/api/customrec/guideRoutePage', {
					limit: this.limit,
					page: this.page,
					dayNum: ''
				}).then(res => {
					if (res.data.code === 0) {
						this.recommendJourneies = res.data.data.list;
					} else this.$showModal(res.data.msg);
				})
			},
			goToDetail(id) {
				uni.navigateTo({
					url: '/pagesTrip/custom-travel/routeDetailnew?id=' + id
				})
			},
			goToTempDetail(index){
				uni.navigateTo({
					url: '/pagesTrip/custom-travel/routeDetailTemp?index=' + index
				})
			},
			changeImage(e, index) {

			}
		}
	}
</script>

<style scoped lang="less">
	/deep/.u-tag--mini {
		height: 32rpx !important;
		line-height: 32rpx !important;
	}

	/deep/.u-swiper__wrapper__item__wrapper__image {}

	/deep/.u-swiper__wrapper__item {
		border-radius: 21rpx;
	}

	.page {
		background: #F5F8FA;

		min-height: 100vh;
		padding: 10rpx 24rpx;
		// padding-top: 130rpx;

		.indicator-num {
			padding: 2px 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100px;
			width: 35px;
			display: flex;
			justify-content: center;

			&__text {
				color: #FFFFFF;
				font-size: 12px;
			}
		}

		.ticketList {
			/deep/.u-swiper {
				border-radius: 25rpx;
			}

			.title {
				margin: 10rpx 0;
				font-size: 24rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			&_tag {
				display: flex;
			}

			&_price {
				display: flex;
				justify-content: space-between;

				button {
					margin-right: 24rpx;
					margin-top: -15rpx;
				}

				&_money {
					width: 92rpx;
					height: 28rpx;
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #FF4141;
					line-height: 28rpx;
					display: flex;
					margin-left: 24rpx;
					margin-top: 14rpx;
				}
			}
		}

		.mainContainer {
			&_title {
				display: flex;
				font-size: 28rpx;
				font-weight: 600;
				line-height: 32rpx;
				color: #111111;
				margin-top: 20rpx;
				margin-bottom: 10rpx;
				flex-direction: column;
				.detail {
					margin: 0 10rpx;

					text {
						width: 134rpx;
						height: 33rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 0rpx;
						color: #999999;
						opacity: 1;
						margin-right: 10rpx;
					}


				}
			}

			&_item {
				background: #FFFFFF;
				border-radius: 25rpx;
				margin-bottom: 25rpx;
				width: 702rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}
		}



		.indicator-num__text {
			color: #f3f3f3f9
		}
	}
</style>